Color Picker Controls

Using the Color Picker

The ColorPicker control allows users to select a color from a standard palette of named colors, or by choosing RGB values using sliders.

Optionally, you can also provide your own color palette, similar to the color palettes in Microsoft Office applications. See the StandardPalettes class for built-in palettes or create your own. If you create your own, it should be a list of NamedColor objects. The default display expects this list to be arranged as follows:

10 “theme” colors.
For each “theme” color, 5 variants of that color. Each block of variants must be contiguous and the blocks must appear in the same order as the “theme” colors. For example, elements 10-14 of the list would be the variants on theme color 0, elements 15-19 the variants of theme color 1, etc.
10 “standard” colors.

If you need to arrange your list differently or format the display differently, you can use the PaletteTemplate property to create your own palette display.

To access the selected color, use the SelectedColor property. You can use the ColorToSolidColorBrushConverter to convert this color to a brush. The example shows how to bind the Background of another element to the ColorPicker selection.

CopyExample Usage

<UserControl.Resources>
  <ms:ColorToSolidColorBrushConverter x:Key="scb" />
</UserControl.Resources>

<StackPanel>
  <ms:ColorPicker Name="cp" />
  <Border Width="40" Height="40" 
          Background="{Binding SelectedColor, ElementName=cp, Converter={StaticResource scb}}" 
          />
</StackPanel>

Using the PaletteColorPicker

The PaletteColorPicker restricts the user to selecting from a specific palette which you provide. The rules for constructing this palette are the same as for the ColorPicker, except that the list must contain an additional “automatic” color as the first element, i.e.

1 “automatic” color.
10 “theme” colors.
For each “theme” color, 5 variants of that color (as above).
10 “standard” colors.

CopyExample Usage - Simple

<ms:PaletteColorPicker SelectedColor="AliceBlue" />

To customise the display of the collapsed part of the PaletteColorPicker, for example to provide a legend or visual hint as to what is affected by the selection, use the CollapsedViewTemplate property. The specified template will be bound to a ColorPickerItem representing the current selection.

CopyExample Usage - Template

<UserControl.Resources>
  <ms:ColorToSolidColorBrushConverter x:Key="scb" />
</UserControl.Resources>

<ms:PaletteColorPicker SelectedColor="DarkRed">
  <ms:PaletteColorPicker.CollapsedViewTemplate>
    <DataTemplate>
      <Border Width="28" Height="20">
        <TextBlock Text="A" 
                   TextAlignment="Center" 
                   FontSize="16" 
                   FontWeight="Bold" 
                   Foreground="{Binding Color, Converter={StaticResource scb}}" />
      </Border>
    </DataTemplate>
  </ms:PaletteColorPicker.CollapsedViewTemplate>
</ms:PaletteColorPicker>